$nav-path: "~@images/nav";
$icons-path: "~@images/icons";

@mixin e($ars, $path, $witdh: false, $height: false) {
  @each $a in $ars {
    .el-icon-#{$a} {
      position: absolute;
      top: 50%;
      left: 32px;
      transform: translateY(-50%) translateX(-50%);
      background-image: url("#{$icons-path}/#{$path}/#{$a}.png");

      &.is-active {
        background-image: url("#{$icons-path}/#{$path}/#{$a}__active.png");
      }
    }
    @if $witdh {
      .el-icon-#{$a} {
        width: $witdh;
        height: $height;
      }
    }
  }
}

[class*="el-icon"],
.icon {
  display: inline-block;
  background: {
    repeat: no-repeat;
    size: 100% auto;
    position: center;
  }
}

.el-icon--default {
  width: 18px;
  height: 18px;
}

.el-icon--meduim {
  width: 16px;
  height: 16px;
}

.el-icon--small {
  width: 14px;
  height: 14px;
}

.el-icon--mini {
  width: 12px;
  height: 12px;
}

$navs: home, flow, report, access, finance;

[class*="icon-nav"] {
  width: 18px;
  height: 18px;
}

@each $n in $navs {
  .icon-nav--#{$n} {
    background-image: url("#{$nav-path}/#{$n}.png");
  }
}

$icons: date, d-arrow-left, arrow-left, d-arrow-right, arrow-right, arrow-up, arrow-down, close, warning, error, success,
  help;

@each $i in $icons {
  .el-icon-#{$i} {
    background-image: url("#{$icons-path}/#{$i}.png");
  }
}

.el-icon-close {
  width: 16px;
  height: 16px;
}

.el-icon-warning {
  width: 22px;
  height: 22px;
}

.el-icon-error {
  width: 16px;
  height: 16px;
}

.el-icon-success {
  width: 16px;
  height: 16px;
}

.el-icon-arrow-left,
.el-icon-arrow-right {
  width: 12px;
  height: 12px;
}


$svg: quit;

@each $s in $svg {
  .el-icon-#{$s} {
    height: 22px;
    width: 22px;
    background-image: url("#{$icons-path}/#{$s}.svg");

    &:hover {
      background-image: url("#{$icons-path}/#{$s}--active.svg");
    }
  }
}